<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        div {
            box-sizing: border-box;
        }

        .box>img {
            width: 230px;
            padding: 5px;
            vertical-align: bottom;
        }

        .box {
            position: relative;
            float: left;
            border: 1px solid #eee;
            border-radius: 5px;

        }

        #container {
            position: relative;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="box">
            <img src="images/01.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/02.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/03.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/04.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/05.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/06.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/07.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/08.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/09.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/10.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/11.jpg" alt="">
        </div>
        <div class="box">
            <img src="images/12.jpg" alt="">
        </div>
    </div>
    <script>
        var url = {
            dataUrl: [{
                src: "01.jpg"
            }, {
                src: "02.jpg"
            }, {
                src: "03.jpg"
            }, {
                src: "04.jpg"
            }, {
                src: "05.jpg"
            }, {
                src: "06.jpg"
            }, {
                src: "07.jpg"
            }, {
                src: "08.jpg"
            }, {
                src: "09.jpg"
            }, {
                src: "10.jpg"
            }, {
                src: "11.jpg"
            }, {
                src: "12.jpg"
            }]
        }

        function place_img() {
            /* 1.首先判断一排能放几张图片 */
            var boxWidth = $('.box').width();
            var windowWidth = $(window).width()
            var num = Math.floor(windowWidth / boxWidth);
            /* 2.获取前一排图片的高度将他们存入一个数组 */
            var heightArr = [];
            $('.box').each(((index, item) => {
                if (index < num) {
                    var boxHeight = $('.box').eq(index).height();
                    heightArr.push(boxHeight)
                } else {
                    /* 3.从图片高度最小的地方开始放置图片 
                    图片样式:1.绝对定位2.left minIndex的offsetLeft  top:minHeight
                    */
                    var minHeight = Math.min(...heightArr);
                    var minIndex = heightArr.indexOf(minHeight);
                    var offsetLeft = $('.box').eq(minIndex).offset().left;
                    $('.box').eq(index).css({
                        left: offsetLeft,
                        top: minHeight,
                        position: 'absolute'
                    })
                    /* 4.重新设置数组的最小高度 */
                    heightArr[minIndex] += $('.box').eq(index).height();
                }
            }))
        }
        /* 5.判断执行下拉刷新的条件 */
        function sCondition() {
            /* 滚动条管理顶部的距离 */
            var sh = document.documentElement.scrollTop;
            /* 可视区域的高度 */
            var vh = document.documentElement.clientHeight;
            var lastH = $(".box:last").offset().top + $(".box:last").height() / 2;
            console.log(lastH)
            /* 滚动条距离顶部的高度加可视区域的高度>最后一个元素距离顶部的高度,则执行滚动 */
            return (sh + vh > lastH) ? true : false;
        }
        /* 6.下拉刷新后添加图片,之后重新计算 */
        function scrollShow() {
            var arr = url.dataUrl;
            $(arr).each((index, item) => {
                var $box = $("<div class='box'></div>")

                var $img = $("<img/>")
                $img.attr("src", "images/" + item.src);
                $box.append($img);
                console.log($box[0])
                $("#container").append($box);
            })
            place_img()
        }
        window.onload = function () {
            
            place_img();
            window.onscroll = function () {
                if (sCondition()) {
                    scrollShow()
                }
            }
        }
    </script>
</body>

</html>